import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login/login.vue'
import Home from '@/components/home/home'
import userlist from '@/components/user-list/list.vue'
Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      component: Home,
      // 当渲染 children 组件的时候会先把 Home组件渲染出来
      // Home 组件找到根组件中的 router-view 出口替换渲染
      // Home 组件的 children 子路由会渲染到Home 组件内部的 router-view出口
      children: [
        {
          path: '/user',
          component: userlist
        }
      ]
    },
    {
      path: '/login',
      component: login
    }
  ]
})

router.beforeEach((to, from, next) => {
  const {path} = to
  if (path !== '/login') {
    // 如果请求的不是 /login 则校验 登录状态
    const token = window.localStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      // 有token 让其通过
      next()
    }
  } else {
    // 如果用户请求的是 /login 则直接调用 next() 放行
    next()
  }
})
export default router
